<template>
  <div id="tool-wrapper" :style="{ right: isManage ? '1%' : '27%' }">
    <div class="tool-item" v-for="item in tools" :title="item.title">
      <a-popover
        v-if="item.title === '图层控制'"
        placement="leftTop"
        trigger="click"
      >
        <template #content>
          <div class="subwayLineNum">
            <!--  <div class="subwayLineNum-item" v-for="num in 10">1号线</div> -->
            <div id="subLine-controller">
              <div class="item-wrapper">
                <div class="item">
                  <div
                    class="allSubway-line-checkBox"
                    :class="{ allLineChecked: subwayLineChecked }"
                    @click="handleAllLineChecked"
                    :style="{
                      borderColor: '#885f12',
                    }"
                    v-show="allLineData"
                  ></div>
                  <span :style="{ color: '#34c5cf' }">全选</span>
                </div>
                <div class="item" v-for="line in allLineData">
                  <div
                    class="subway-line-checkBox"
                    @click="handleLineChecked(line)"
                    :style="{
                      borderColor: line.checked ? line.color : '#885f12',
                      backgroundColor: line.checked
                        ? line.color
                        : 'transparent',
                    }"
                  ></div>
                  <span :style="{ color: '#34c5cf' }">{{
                    line.name.split('交通')[1]
                  }}</span>
                </div>
              </div>
            </div>
          </div>
        </template>
        <i
          :class="['iconfont', item.icon, disabled ? 'disabled-icon' : '']"
        ></i>
      </a-popover>
      <i
        :class="['iconfont', isShowPositionStatusBar?item.iconTrue:item.iconFalse]"
        v-if="item.title === '鼠标位置显示'"
        @click="showPositionStatusBar"
      ></i>
      <i
        :class="['iconfont', isFullScreen ? item.iconTrue : item.iconFalse]"
        v-if="item.title === '全屏显示'"
        @click="fullScreen()"
      ></i>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, computed, watch } from 'vue';
import { watchLineData, useLineData } from '@/store';
import {
  renderAll,
  renderStationBill,
  changeDisplayBillBoard,
} from '../cesiumTools/controller/effectController.js';
import {
  controlAll,
  chooseLine,
} from '../cesiumTools/controller/lineController.js';
import PositionStatusBar from '../cesiumTools/controller/PositionStatusBar.js';

const lineDataStore = useLineData()

const disabled = ref(false);
const isManage = ref(false);

const subwayLineChecked = ref(true);
const tools = ref([
  {
    title: '鼠标位置显示',
    iconFalse:'icon-zuobiaozhou',//未显示位置信息
    iconTrue: 'icon-shubiaoweizhi',//显示位置信息
  },
  {
    title: '图层控制',
    icon: 'icon-layer',
  },
  {
    title: '全屏显示',
    iconFalse: 'icon-quanping', //进入全屏
    iconTrue: 'icon-tuichuquanping', //退出全屏
  },
]);

const allLineData = ref([]);
// 监听viewer是否设置，如果设置了可以获取viewer
const promise = watchLineData('setViewer');
promise.then(viewer => {
  // console.log(viewer);
});

let positionStatusBar
let isShowPositionStatusBar=ref(false)
//显示鼠标位置状态栏
const showPositionStatusBar = () => {
  if(!isShowPositionStatusBar.value){
    positionStatusBar.show()
  }else{
    positionStatusBar.hide()
  }
  isShowPositionStatusBar.value = !isShowPositionStatusBar.value;
}

//全屏开关:其实就是实现了键盘上的F11功能
const isFullScreen = ref(false);
const fullScreen = () => {
  if (!document.fullscreenElement) {
    // 如果当前不是全屏状态
    isFullScreen.value = true;
    document.documentElement.requestFullscreen().catch(err => {
      alert(
        `Error attempting to enable full-screen mode: ${err.message} (${err.name})`
      );
    });
  } else {
    if (document.exitFullscreen) {
      isFullScreen.value = false;
      document.exitFullscreen(); // 如果已经在全屏模式，则退出全屏
    }
  }
};

//控制全部显示或者隐藏
const handleAllLineChecked = () => {
  subwayLineChecked.value = !subwayLineChecked.value;
  //为true时显示所有线路和popup，为false时隐藏所有线路和popup
  controlAll(subwayLineChecked.value, allLineData);
  let names = [];
  allLineData.value.forEach(line => {
    const { stationsList } = line;
    //console.log(stationsList)
    stationsList.forEach(station => {
      names.push(station.name);
    });
  });
  //console.log(names);
  changeDisplayBillBoard(names, subwayLineChecked.value);
};
//控制单个线路的显示或者隐藏
//这里有个小bug,先选择一条线进行勾选或者不勾选,颜色不变,但是先全选关闭或者开启后,再单选线路勾选颜色才会变化
const handleLineChecked = line => {
  chooseLine(line);
  let names = line.stationsList.map(station => station.name);
  changeDisplayBillBoard(names, line.checked);
};

const loadStationBillboard = (viewer, lineData) => {
  lineData.forEach(line => {
    const { stationsList, color } = line;
    stationsList.forEach(station => {
      const { position, name, peopleFlow, isChange } = station;
      renderStationBill(viewer, {
        position,
        height: 600,
        name: name,
        color: isChange === 1 ? '#B21002' : color,
        attr: { peopleFlow, isChange },
      });
    });
  });
};

// $onAction 用于订阅 store 中所有的 actions
// 监听pinia中disableController方法的调用, 如果有调用的话 ,则执行after下的回调
lineDataStore.$onAction(({ name, store, args, after, onError })=>{
  if (name === 'disableController'){
    after((res) => {
      disabled.value = lineDataStore.disable;
    });
  }
})

onMounted(async () => {
  //在toolBar.vue渲染场景道路线数据
  const viewer = await watchLineData('setViewer');
  const lineData = await watchLineData('setData');
  positionStatusBar = new PositionStatusBar(viewer);
  //加载站名popup这个其实可以放到renderAll()中去
  allLineData.value = lineData;
  renderAll(viewer, lineData);
  // loadStationBillboard(viewer, lineData);
});
</script>

<style scoped>
#tool-wrapper {
  position: absolute;
  right: 30%;
  bottom: 10%;
  display: flex;
  flex-direction: column;
  z-index: 19999;
}

.tool-item {
  margin: 4px;
  pointer-events: all;
  cursor: pointer;
}

.tool-item:hover {
  background-color: #d8951a7f;
}

#tool-wrapper i,
.subwayLineNum-item {
  color: #ffd31a;
  border: 1px solid #d8951a;
  padding: 4px;
}
.subwayLineNum-item {
  margin: 5px 0;
  /* 半透明灰色 */
  background-color: rgba(128, 128, 128, 0.8);
  /* 半透明蓝色 */
  /* background-color: hsla(200, 100%, 50%, 0.5);  */
}
.subwayLineNum-item:hover {
  background-color: #d8951a7f;
  /* 小手 */
  cursor: pointer;
}
.subwayLineNum-item .line-checkbox {
  width: 10px;
  height: 10px;
  background: orangered;
}

#tool-wrapper span {
  color: #fff;
}

.disabled-icon {
  pointer-events: none;
  cursor: none;
  background-color: rgba(204, 204, 204, 0.306);
}

.disabled-icon:hover {
  cursor: none;
}

#subLine-controller {
  border: 1px solid #664a16;
  display: flex;
  flex-direction: column;
  width: auto;
}
.item-wrapper {
  display: flex;
  flex-direction: column;
  padding: 0 0.156vw;
}
.subway-line-checkBox {
  width: 10px;
  height: 10px;
  border-width: 1px;
  border-style: solid;
  background: transparent;
  user-select: all;
  cursor: pointer;
}

.item {
  width: 6vw;
  height: 2vw;
  margin: 5px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.156vw 0.156vw;
  background-color: rgba(255, 255, 255, 0.2);
  border: 1px solid #885f12;
  color: #fff;
  font-size: 1.5vw;
  pointer-events: all;
  cursor: pointer;
}

.item:hover {
  border: 1px solid #d8961a;
}

.item > span {
  font-size: 1vw;
  line-height: 0.469vw;
}

.item > input {
  outline: none;
  border: none;
  transition: all 0.3s ease;
}

.item-wrapper {
  display: flex;
  justify-content: space-between;
  align-content: space-around;
  flex-wrap: wrap;
  flex: 1;
}
.allSubway-line-checkBox {
  width: 10px;
  height: 10px;
  border-width: 1px;
  border-style: solid;
  background: #999;
  user-select: all;
  cursor: pointer;
}
.allLineChecked {
  position: relative;
}
.allLineChecked::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 20%;
  width: 0px;
  height: 4px;
  border: 1px solid white;
  background: white;
  transform: translate(-10%, -50%) rotate(-45deg);
}
.allLineChecked::after {
  content: '';
  position: absolute;
  top: 60%;
  left: 50%;
  width: 0px;
  height: 5px;
  border: 1px solid white;
  background: white;
  transform: translate(-10%, -70%) rotate(45deg);
}
</style>
<style>
.ant-popover-inner {
  background-color: unset !important;
}
</style>
